<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Element UI布局与ECharts图表</title>
  <!-- 引入Element UI CSS -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css">
  <!-- 引入ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <!-- 引入Element UI JS -->
  <script src="https://unpkg.com/element-ui@2.15.13/lib/index.js"></script>
  <style>
    html, body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
    }
    .header {
      height: 60px;
      background-color: #f5f7fa;
      border-bottom: 1px solid #e4e7ed;
      padding: 0 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .header-left {
      font-size: 20px;
      font-weight: bold;
      color: #303133;
    }
    .header-right {
      display: flex;
      align-items: center;
    }
    .content {
      flex: 1;
      overflow: auto;
      padding: 20px;
      background-color: #ffffff;
    }
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      gap: 20px;
      height: 100%;
    }
    .grid-item {
      border: 1px solid #ebeef5;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .grid-item-header {
      padding: 10px 15px;
      background-color: #f5f7fa;
      border-bottom: 1px solid #ebeef5;
      font-weight: 500;
    }
    .grid-item-content {
      flex: 1;
      min-height: 0;
      padding: 10px;
    }
    .footer {
      height: 40px;
      background-color: #f5f7fa;
      border-top: 1px solid #e4e7ed;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #909399;
      font-size: 14px;
    }
    .chart-container {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="app" class="container">
    <!-- 上部区域 -->
    <div class="header">
      <div class="header-left">数据可视化平台</div>
      <div class="header-right">
        <el-dropdown trigger="click">
          <span class="el-dropdown-link">
            选择视图 <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>视图一</el-dropdown-item>
            <el-dropdown-item>视图二</el-dropdown-item>
            <el-dropdown-item>视图三</el-dropdown-item>
            <el-dropdown-item divided>设置</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <el-button style="margin-left: 10px;" type="primary">刷新</el-button>
      </div>
    </div>

    <!-- 中间区域 - 九宫格布局 -->
    <div class="content">
      <div class="grid-container">
        <!-- 第1个图表 -->
        <div class="grid-item">
          <div class="grid-item-header">柱状图</div>
          <div class="grid-item-content">
            <div class="chart-container" id="chart1"></div>
          </div>
        </div>

        <!-- 第2个图表 -->
        <div class="grid-item">
          <div class="grid-item-header">折线图</div>
          <div class="grid-item-content">
            <div class="chart-container" id="chart2"></div>
          </div>
        </div>

        <!-- 第3个图表 -->
        <div class="grid-item">
          <div class="grid-item-header">饼图</div>
          <div class="grid-item-content">
            <div class="chart-container" id="chart3"></div>
          </div>
        </div>

        <!-- 第4个图表 -->
        <div class="grid-item">
          <div class="grid-item-header">雷达图</div>
          <div class="grid-item-content">
            <div class="chart-container" id="chart4"></div>
          </div>
        </div>

        <!-- 第5个图表 -->
        <div class="grid-item">
          <div class="grid-item-header">散点图</div>
          <div class="grid-item-content">
            <div class="chart-container" id="chart5"></div>
          </div>
        </div>

        <!-- 第6个图表 -->
        <div class="grid-item">
          <div class="grid-item-header">K线图</div>
          <div class="grid-item-content">
            <div class="chart-container" id="chart6"></div>
          </div>
        </div>

        <!-- 第7个图表 -->
        <div class="grid-item">
          <div class="grid-item-header">热力图</div>
          <div class="grid-item-content">
            <div class="chart-container" id="chart7"></div>
          </div>
        </div>

        <!-- 第8个图表 -->
        <div class="grid-item">
          <div class="grid-item-header">仪表盘</div>
          <div class="grid-item-content">
            <div class="chart-container" id="chart8"></div>
          </div>
        </div>

        <!-- 第9个图表 -->
        <div class="grid-item">
          <div class="grid-item-header">树状图</div>
          <div class="grid-item-content">
            <div class="chart-container" id="chart9"></div>
          </div>
        </div>
      </div>
    </div>

    <!-- 下部区域 -->
    <div class="footer">
      <span>© 2025 数据可视化平台 版权所有</span>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      mounted() {
        this.initCharts();
        // 监听窗口大小变化，调整图表尺寸
        window.addEventListener('resize', () => {
          this.resizeCharts();
        });
      },
      methods: {
        initCharts() {
          // 初始化9个不同类型的图表
          this.initChart1();
          this.initChart2();
          this.initChart3();
          this.initChart4();
          this.initChart5();
          this.initChart6();
          this.initChart7();
          this.initChart8();
          this.initChart9();
        },
        initChart1() {
          const chart = echarts.init(document.getElementById('chart1'));
          chart.setOption({
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [120, 200, 150, 80, 70, 110, 130],
              type: 'bar'
            }]
          });
          this.$data.charts.push(chart);
        },
        initChart2() {
          const chart = echarts.init(document.getElementById('chart2'));
          chart.setOption({
            xAxis: {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line'
            }]
          });
          this.$data.charts.push(chart);
        },
        initChart3() {
          const chart = echarts.init(document.getElementById('chart3'));
          chart.setOption({
            series: [{
              name: '访问来源',
              type: 'pie',
              radius: '50%',
              data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
              ]
            }]
          });
          this.$data.charts.push(chart);
        },
        initChart4() {
          const chart = echarts.init(document.getElementById('chart4'));
          chart.setOption({
            radar: {
              indicator: [
                {name: '销售', max: 6500},
                {name: '管理', max: 16000},
                {name: '信息技术', max: 30000},
                {name: '客服', max: 38000},
                {name: '研发', max: 52000},
                {name: '市场', max: 25000}
              ]
            },
            series: [{
              type: 'radar',
              data: [
                {
                  value: [4300, 10000, 28000, 35000, 50000, 19000],
                  name: '预算分配'
                }
              ]
            }]
          });
          this.$data.charts.push(chart);
        },
        initChart5() {
          const chart = echarts.init(document.getElementById('chart5'));
          chart.setOption({
            xAxis: {},
            yAxis: {},
            series: [{
              symbolSize: 20,
              data: [
                [10.0, 8.04],
                [8.0, 6.95],
                [13.0, 7.58],
                [9.0, 8.81],
                [11.0, 8.33],
                [14.0, 9.96],
                [6.0, 7.24],
                [4.0, 4.26],
                [12.0, 10.84],
                [7.0, 4.82],
                [5.0, 5.68]
              ],
              type: 'scatter'
            }]
          });
          this.$data.charts.push(chart);
        },
        initChart6() {
          const chart = echarts.init(document.getElementById('chart6'));
          chart.setOption({
            xAxis: {
              type: 'category',
              data: ['2025/5/1', '2025/5/2', '2025/5/3', '2025/5/4', '2025/5/5', '2025/5/6', '2025/5/7']
            },
            yAxis: {
              scale: true
            },
            series: [{
              name: 'AAPL',
              type: 'candlestick',
              data: [
                [20, 34, 10, 38],
                [40, 35, 30, 50],
                [31, 38, 33, 44],
                [38, 15, 5, 42],
                [30, 32, 20, 40],
                [32, 33, 31, 34],
                [33, 31, 30, 35]
              ]
            }]
          });
          this.$data.charts.push(chart);
        },
        initChart7() {
          const chart = echarts.init(document.getElementById('chart7'));
          chart.setOption({
            visualMap: {
              min: 0,
              max: 100,
              calculable: true,
              orient: 'horizontal',
              left: 'center',
              bottom: '10%'
            },
            xAxis: {
              type: 'category',
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            },
            yAxis: {
              type: 'category',
              data: ['上午', '中午', '下午', '晚上']
            },
            series: [{
              name: '活跃度',
              type: 'heatmap',
              data: [
                [0, 0, 50], [0, 1, 30], [0, 2, 80], [0, 3, 40],
                [1, 0, 60], [1, 1, 70], [1, 2, 90], [1, 3, 50],
                [2, 0, 30], [2, 1, 40], [2, 2, 50], [2, 3, 30],
                [3, 0, 20], [3, 1, 30], [3, 2, 40], [3, 3, 50],
                [4, 0, 60], [4, 1, 70], [4, 2, 80], [4, 3, 60],
                [5, 0, 80], [5, 1, 90], [5, 2, 70], [5, 3, 80],
                [6, 0, 30], [6, 1, 40], [6, 2, 50], [6, 3, 40]
              ]
            }]
          });
          this.$data.charts.push(chart);
        },
        initChart8() {
          const chart = echarts.init(document.getElementById('chart8'));
          chart.setOption({
            series: [{
              type: 'gauge',
              axisLine: {
                lineStyle: {
                  width: 30
                }
              },
              detail: {formatter: '{value}%'},
              data: [{value: 65, name: '完成率'}]
            }]
          });
          this.$data.charts.push(chart);
        },
        initChart9() {
          const chart = echarts.init(document.getElementById('chart9'));
          chart.setOption({
            series: [{
              type: 'tree',
              data: [{
                name: 'Top Level',
                children: [
                  {
                    name: 'Level 2: A',
                    children: [
                      {name: 'Son of A'},
                      {name: 'Daughter of A'}
                    ]
                  },
                  {name: 'Level 2: B'}
                ]
              }],
              left: '20%',
              right: '20%',
              top: '15%',
              bottom: '15%',
              symbol: 'emptyCircle',
              symbolSize: 7,
              initialTreeDepth: 2
            }]
          });
          this.$data.charts.push(chart);
        },
        resizeCharts() {
          // 调整所有图表尺寸
          this.$data.charts.forEach(chart => {
            chart.resize();
          });
        }
      },
      data() {
        return {
          charts: []
        };
      }
    });
  </script>
</body>
</html>
